<!DOCTYPE html>
<html lang="en" class="deeppurple-theme">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
    <meta name="description" content="">
    <title>{$Think.lang.pay_title}</title>
    <!-- Material design icons CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Roboto fonts CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="/red/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Swiper CSS -->
    <link href="/red/swiper/swiper-bundle.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/red/style.css?v=V1.24" rel="stylesheet">
    <link rel="stylesheet" href="/static_new/css/public.css?v=V1.24">
    <style>
        .recharge-slide {
            height: 170px;
            padding-bottom: 20px;
        }

        .recharge-slide .swiper-slide {
            padding: 0 15px 10px 15px;
            width: 250px;
        }

        .recharge-slide .swiper-slide .card {
            overflow: hidden;
            height: 100%;
            margin: 0;
        }

        .recharge-slide.swiper-container-horizontal > .swiper-pagination-bullets {
            margin-bottom: -10px;
        }

        .recharge-slide .swiper-slide .card {
            height: auto;
            padding: 5px;
        }

        .btn-channel {
            margin-bottom: 15px;
        }
    </style>
    <link href="/public/js/layer_mobile/need/layer.css?2.0" type="text/css" rel="styleSheet" id="layermcss">
    <style>
        .padding-top-20 {
            padding-top: 20px;
        }

        .padding-top-10 {
            padding-top: 10px;
        }

        .flex-row {
            display: flex;
            justify-content: space-between;
        }

        button {
            padding: 5px 10px !important;
        }

        .pay-item {
            padding: 10px;
            background: #ffffff;
            margin-top: 10px;
            border-radius: 10px;
        }

        .pay-item .txt {
            line-height: 40px;
            padding-left: 20px;
        }

        .input {
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            border: 0;
        }
    </style>
</head>
<body>
<a href="javascript:void(0)" class="closesidemenu">
    <i class="material-icons icons-raised bg-dark ">close</i></a>
<div class="wrapper homepage">
    <!-- header -->
    <div class="header bg-template" style="backdrop-filter:none">
        <div class="row no-gutters">
            <div class="col-auto">
                <a href="javascript:history.go(-1)" class="btn btn-link text-white">
                    <i class="material-icons">chevron_left</i></a>
            </div>
            <div class="col text-center">
                <button class="btn w-100 text-white">{$Think.lang.pay_title}</button>
            </div>
            <div class="col-auto">
                <!--<a href="{$user_service_chats}" class="btn  btn-link text-white position-relative">
                    <i class="material-icons">support_agent</i></a>-->
            </div>
        </div>
    </div>
    <!-- header ends -->
    <div class="container">
        <h6 class="subtitle text-center">{$Think.lang.Record}</h6>
        <div class="flex-row padding-top-10 pay-item">
            <div class="txt">SN: {$op_data.sn}</div>
        </div>
        <div class="flex-row padding-top-10 pay-item">
            <div class="txt">amount: {:config("currency")} {$op_data.amount}</div>
        </div>
        <h6 class="subtitle text-center">{$pay_info.name}</h6>
        <!--<div class="row">
            <div class="col-12 text-center">
                <img src="{$pay_info.ewm}" style="width: 50%">
            </div>
        </div>-->
        <div>
            <div class="flex-row padding-top-10 pay-item">
                <div class="txt">BANK: {$pay_info.username}</div>
                <div>
                    <button onclick="copy_txt('{$pay_info.username}')"
                            class="btn btn-default shadow btn-rounded btn-block btn-lg">
                        <span>{$Think.lang.copy}</span>
                    </button>
                </div>
            </div>
            <div class="flex-row padding-top-10 pay-item">
                <div class="txt">PIX: {$pay_info.usercode}</div>
                <div>
                    <button onclick="copy_txt('{$pay_info.usercode}')"
                            class="btn btn-default shadow btn-rounded btn-block btn-lg">
                        <span>{$Think.lang.copy}</span>
                    </button>
                </div>
            </div>
        </div>
        <h6 class="subtitle text-center">{$Think.lang.recharge_u_info}</h6>
        <div class="">
            <div class="col-12 col-md-6">
                <div class="form-group float-label">
                    <input type="text" class="form-control" required="" name="realname" value="">
                    <label class="form-control-label">{$Think.lang.bank_real}</label>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group float-label">
                    <input type="text" class="form-control" required="" name="document_id" value="">
                    <label class="form-control-label">Wallet Document ID</label>
                </div>
            </div>
            <button type="button" id="save-btn"
                    class="btn btn-lg btn-default btn-block btn-rounded shadow mt-4 submit-btn">
                {$Think.lang.recharge_u_btn}
            </button>
        </div>
        <div class="card shadow border-0 mb-3" style="margin-top: 20px">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col"><p class="text-mute small text-secondary">pix： se você não receber confirmação
                        após 30 minutos de recarga bem sucedida, favor entrar em contato com o serviço de atendimento ao
                        cliente</p></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<!-- jquery, popper and bootstrap js -->
<script src="/red/jquery-3.3.1.min.js"></script>
<script src="/red/popper.min.js"></script>
<script src="/red/bootstrap/js/bootstrap.min.js"></script>
<!-- swiper js -->
<script src="/red/swiper/swiper-bundle.min.js"></script>
<!-- cookie js -->
<script src="/red/jquery.cookie.js"></script>
<script charset="utf-8" src="/static_new/js/dialog.min.js"></script>
<link rel="stylesheet" href="/public/js/layer_mobile/need/layer.css">
<script src="/public/js/layer_mobile/layer.js"></script>
<script charset="utf-8" src="/static_new/js/jquery.progressBarTimer.js"></script>
<script charset="utf-8" src="/static_new/js/common.js"></script>
<!-- template custom js -->
<script src="/red/main.js?v=V1.24"></script>
<input name="" id="webcopyinput" type="text" style="left: -1000px; position: absolute" value="">
<script>
    $(function () {
        $('#save-btn').click(function () {
            var data = {
                'realname': $("input[name=realname]").val(),
                'document_id': $("input[name=document_id]").val(),
                sn: '{$op_data.sn}'
            };
            if (data.realname == '') {
                $("input[name=realname]").focus();
                return false;
            }
            if (data.document_id == '') {
                $("input[name=document_id]").focus();
                return false;
            }
            $.ajax({
                url: '{:url("/index/pay/user_ok")}',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function (res) {
                    $(document).dialog({infoText: res.info});
                    if (res.code == 1) {
                        setTimeout(function () {
                            window.location.replace('/');
                        }, 2000);
                    }
                }
            });
        });
    });

    function copy_txt(xx) {
        var text = document.getElementById("webcopyinput");
        text.id = 'webcopyinput';
        text.value = '' + xx + '';
        text.focus(); //给input输入框聚焦
        text.setSelectionRange(0, text.value.length);
        copied = document.execCommand('Copy');
        text.blur();
        copied = false;
        document.body.scrollTop = 0;
        $(document).dialog({
            infoText: '{$Think.lang.copy_ok}'
        });
    }
</script>
</body>
</html>